/*关于not选择器:not(selector)，以下写法p:not(.tx)中间不能有空格，selector只能写一个，下面写法代表的含义是*!*/
/*除了class为tx的p标签，剩余p标签内容显示红色，高度40px*/
p:not(.tx) {
    /*color: #FF0000;*/
    height: 40px;
}
h2 {
    color: red;
}
h3 {
    color: #c7254e;
}
.see {
    overflow: visible;
}
.hid {
    overflow: hidden;
}
.cro {
    overflow: scroll;
}
.au {
    overflow: auto;
}
.cl {
    white-space: nowrap;/*强制不换行*/
    /*overflow和text-overflow共用才能实现超出内容隐藏*/
    overflow: hidden;
    text-overflow: clip;
}

/*Webkit内核浏览器设置内容两行，长处用省略号显示*/
.el {
    position: relative;
    /*overflow和text-overflow共用才能实现超出内容省略*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient:vertical;
}
code {
    color: #c7254e;
    background-color: #f9f2f4;
    margin: 4px;
}

/*内容超两行超出显示省略号和更多的兼容写法*/
.tx {
    line-height: 2em;/*设置行高，否则无法计算内容有几行*/
    position: relative;/*设置相对位置，便于省略号的定位*/
}
.ell {
    max-height: 4em;/*设置最多两行*/
    overflow: hidden;
}
/*用伪类显示省略号，但是伪类显示手型的属性不起作用，所以就用下面的a标签辅助*/
.ell::after {
    content:"...更多";
    color: dodgerblue;
    /*
    position属性规定元素的定位类型
    static：默认值。没有定位，元素出现在正常的流中（忽略top、bottom、left、right或者z-index声明）。
    absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位（通过top、bottom、left、right属性进行定位）。
    fixed：生成绝对定位的元素，相对于浏览器窗口进行定位（通过top、bottom、left、right属性进行定位）。
    relative：生成相对定位的元素，相对于其正常位置进行定位。"left:20px"会向元素的LEFT位置添加20像素。
    inherit：规定应该从父元素继承position属性的值。
    */
    position: absolute;
    bottom: 0;/*把...元素的底边缘设置在其包含元素底边缘之上0像素的位置*/
    right: 0;
    padding:0 20px 0 75px;
    /*设置渐变色,从透明到55%白色*/
    background: linear-gradient(to right, transparent, #fff 55%);
    /*用渐变图片替代渐变色*/
    /*background-image: url(../img/ellipsis_bg.png);*/
}
/*为了省略号上能显示手型，在省略号位置同样放置一个a标签*/
a:last-child {
    cursor: pointer;/*显示鼠标手型效果*/
    position: absolute;
    height: 2em;/*设置a标签高度同文本，否则a标签无高度，那么就不会显示手型*/
    bottom: 0;
    right: 16px;
    padding: 0 20px 0 30px;
    z-index: 999;/*a标签置顶，否则也观察不到手型*/
}

div {
    width: 200px;
    height: 200px;
    margin: auto;/*让div居中*/
    border: 10px dashed #FF0000;
    padding: 20px;
}